<template>
  <div>
    <div class="ret">
      <van-nav-bar title="欢迎使用预约服务" left-text="返回" left-arrow @click-left="toHomeIndex()"/>
    </div>
    <div>
      <div class="icon">
        <van-icon name="success"/>
      </div>
      <div class="cart">提前寻找车辆</div>
    </div>
    <div class="choose">
      <!--  时间-->
      <div class="time">
        <div class="click">
          <van-icon name="clock-o"/>
        </div>
        <div class="time-choose">
          <span>预约时间：</span>
          <span>{{makeDate}}</span>
        </div>
      </div>

      <!--  出发点，目的地-->
      <div @input="getOriginCoordinates" >
        <img src="@/assets/双圆圈.png" width="15px" height="15px" style="margin-left: 25px;margin-top: 10px;">
        <div class="start">
          将从<span>{{startaddress}}</span>上车
        </div>

      </div>
      <div @click="toEnd" @input="getDestinationCoordinates">
        <van-icon name="location" color="red" style="margin-top: 10px;margin-left: 20px"/>
        <div class="end">
          {{endaddress}}
        </div>

        <!--    安全图标-->
        <div class="Home" @click="toSecurity()">
          <van-image
              width="50px"
              height="50px"
              src="https://img95.699pic.com/element/40106/6770.png_860.png"
          />
        </div>

<!--        <input type="text" v-model="endaddress" style="width: 230px; height: 27px;" disabled placeholder="请选择您的目的地">-->
      </div>
      <van-button type="primary" style="width: 90%;margin-left: 5px;margin-top: 20px;background-color: #4B9EFF" @click="toWait()">确认</van-button>
    </div>


  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";

export default {
  data() {
    return {
        passengerName: '',
        passengerPhone: '',
        orderStatus: 0,
        orderId: null,
        //出发地
        startaddress:"",
        //目的地
        endaddress:"",
        makeDate:null,
      order:{
        orderId:null,
      }

    };
  },
  created() {
    this.startAndEndaddress()
    this.makeTime()
    this.findByOrderId()
    this.findByOrderTime()
  },
  mounted() {

  },
  methods: {
    //根据orderId查询出发点和目的地
    findByOrderId(){
      //接收传过来的orderId
      this.order.orderId=this.$route.query.orderId
      axios.post("http://localhost:8081/passenger/order/findByOrder",this.order).then(res=>{
        console.log(res.data.data)
        if (res.status===200){
          this.startaddress=res.data.data.startingPointAddress
          this.endaddress=res.data.data.destinationAddress
        }
      })
    },

  //根据orderId 查询下单时间
    findByOrderTime(){
      this.order.orderId=this.$route.query.orderId
      axios.post("http://localhost:8081/passenger/order/findByOrderIdTime",this.order).then(res=>{
        console.log(res.data.data)
        if (res.status===200){
          this.makeDate=res.data.data.orderTime
        }
      })
    },

    makeTime(){
      //获取预约时间
      this.makeDate=this.$route.query.makeDate;
      // 获取出发地目的地
      this.startaddress=this.$route.query.startaddress;
      this.endaddress=this.$route.query.endaddress;
      console.log("预约时间：",this.makeDate);
      console.log("出发地：",this.startaddress);
      console.log("目的地：",this.endaddress);
    },
    //获取出发点目的地地址
    startAndEndaddress(){
      const startaddress=this.$route.query.startaddress;
      const endaddress=this.$route.query.endaddress;
      this.startaddress=startaddress;
      this.endaddress=endaddress;
      console.log("出发地：",this.startaddress);
      console.log("目的地：",this.endaddress);
    },
    // 跳安全中心
    toSecurity() {
      this.$router.push({
        path: '/security_center'
      })
    },

    getOriginCoordinates() {
      if (this.origin.address) {
        const geocoder = new AMapLoader.Geocoder({
          // city: '', // 可以根据需要设置城市编码
        });
        geocoder.getLocation(this.origin.address, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const location = result.geocodes[0].location;
            this.origin.latitude = location.lat;
            this.origin.longitude = location.lng;
          } else {
            console.error('无法获取出发地坐标');
          }
        });
      }
    },
    getDestinationCoordinates() {
      if (this.destination.address) {
        const geocoder = new AMapLoader.Geocoder({
          // city: '',
        });
        geocoder.getLocation(this.destination.address, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const location = result.geocodes[0].location;
            this.destination.latitude = location.lat;
            this.destination.longitude = location.lng;
          } else {
            console.error('无法获取目的地坐标');
          }
        });
      }
    },
    toWait(){
      this.$router.push({
        path: '/wait',
        query:{
          orderId:this.order.orderId
        }
      })
    },
    toEnd(){
      this.$router.push({
        path: '/endPoint'
      })
    },
    toHomeIndex() {
      this.$router.push({
        path: '/',
        query:{
          startaddress:this.startaddress,
          endaddress:this.endaddress
        }
      })
    }
  }
};

</script>
<style scoped>
.choose{
  width: 100%;
  height: 400px;
  margin-left: 15px;
  margin-top: 80px;
  float: left;
  background-color: white;
}

.Home {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 70vh;
  margin-left: 10px;
}
.start{
  font-size: 15px;
  width: 80%;
  margin-left: 46px;
  margin-top: -21px;
  float: left;
  word-wrap: break-word;
}
.end{
  font-size: 15px;
  width: 80%;
  margin-left: 46px;
  margin-top: -21px;
  float: left;
  word-wrap: break-word;
}

.time {
  width: 100%;
  height: 100px;
  margin-left: 15px;
  margin-top: 20px;
  float: left;
  background-color: white;
}
.time-choose{
  width: 100%;
  height: 50px;
  margin-left: 27px;
  margin-top: -20px;
  float: left;
}
.icon {
  width: 100%;
  margin-left: 20px;
  margin-top: 10px;
  float: left;
}

.cart {
  width: 100%;
  margin-left: 40px;
  margin-top: -21px;
  float: left;
}

</style>